<div class="modal-header">
    <h4 class="modal-title">{{ existing ? 'Edit' : 'Add' }} {{ isGlobal ? 'Global' : 'Workflow' }} Variable</h4>
</div>
<div class="modal-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input name="name" type="text" [(ngModel)]="variable.name" class="form-control">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group">
                    <label for="value">{{ isGlobal ? 'Value' : 'Default Value'}}</label>
                    <json-editor #jsonEditor [options]="editorOptionsData" [data]="initialValue"></json-editor>
                    <small class="form-text text-info pl-1">
                        <i class="fa fa-exclamation-circle pr-1" aria-hidden="true"></i>
                        If JSON is invalid, results will be saved as a string
                    </small>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group">
                    <label for="description">Description (optional)</label>
                    <textarea name="description" rows="3" [(ngModel)]="variable.description"
                        class="form-control"></textarea>
                </div>
            </div>
            <div *ngIf="isGlobal" class="col-12">
                <div class="card">
                    <div class="card-header h6">
                        Permissions
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <h6>Who can access variable?</h6>
                            <select class="form-control" name="access_level" [(ngModel)]="variable.permissions.access_level">
                                <option [ngValue]="1" label="Everyone">Everyone</option>
                                <option [ngValue]="2" label="Role Based">Role Based</option>
                                <option [ngValue]="0" label="Only Me">Only Me</option>
                            </select>
                            <small class="form-text text-muted pl-1">
                                <span *ngIf="variable.permissions.access_level == 0">
                                    Only you have access to this global variable.
                                </span>
                                <span *ngIf="variable.permissions.access_level == 1">
                                    By default everyone will have access to this global variable.
                                </span>
                                <span *ngIf="variable.permissions.access_level == 2">
                                    Only users of the roles specified below will have access to this global variable.
                                </span>
                            </small>
                        </div>
                        <div *ngIf="variable.permissions.access_level == 2" class="form-group">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th scope="col">Role</th>
                                        <th scope="col">Permission</th>
                                        <th scope="col"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let p of variable.permissions.permissions">
                                        <td>{{ getRoleName(p)  }}</td>
                                        <td>{{ getPermissionDescription(p) }}</td>
                                        <td><button type="button" (click)="deletePermission(p)"
                                                class="btn btn-sm btn-danger mx-1" ngbTooltip="Remove"><i
                                                    class="fa fa-times"></i></button></td>
                                    </tr>
                                    <tr *ngIf="variable.permissions.permissions.length == 0">
                                        <td class="text-center text-muted" colspan="3">No Role Based Permissions
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="form-group row">
                                <div class="col">
                                    <select class="form-control" name="new-role" [(ngModel)]="newPermission.role">
                                        <option [ngValue]="''">Role...</option>
                                        <option *ngFor="let r of systemRoles" [ngValue]="r.id" [label]="r.name">
                                            {{r.name}}</option>
                                    </select>
                                </div>
                                <div class="col pl-0 mr-3">
                                    <select class="form-control" name="new-permission"
                                        [(ngModel)]="newPermission.permissions">
                                        <option [ngValue]="''">Permission...</option>
                                        <option *ngFor="let p of permissionOptions" [ngValue]="p.crud"
                                            [label]="p.description">
                                            {{ p.description }}</option>
                                    </select>
                                </div>
                                <div class="col-1">
                                    <button type="button" ngbTooltip="Add New" class="btn btn-primary pull-right"
                                        (click)="addPermission()">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()">Close</button>
    <button type="button" class="btn btn-primary" (click)="submit()">Save</button>
</div>